<template>
  <div class="app-container">
    <ComponentSearchBar placeholder="输入名称搜索" v-model:name="query.name" @query = "onSearch" >
      <div class="w-a mr">
      <ZhongyiComponentsTagTree v-model="query.tagId" type="1" />
    </div>
      </ComponentSearchBar>

    <el-card class="box-card mt">
      <el-button type="primary"  @click="onAdd">
        <el-icon :size="20" class="mr-1">
          <IconIcOutlineAdd />
        </el-icon>添加
      </el-button>

      <ZhongyiYaocaiEdit 
        :data="current"
        v-model:isShow="isShow"
            :title="title"
            @onChange = "onChange"
            @onClose = "isShow = false"
            />

      <el-table
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%; margin-top: 10px"
        >
          <el-table-column
            :show-overflow-tooltip="true"
            prop="name"
            label="药材名"
            width="80"
          >
          <template  #default="scope" >
            <el-link type="primary" @click="gotodetail(scope.row)">{{ scope.row.name }}</el-link>
            </template>
             
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="name"
            label="类别"
            width="120"
          >
           <template  #default="scope">
                 {{ scope.row.tag?.name }}
            </template>
            </el-table-column>
         
          <el-table-column
            :show-overflow-tooltip="true"
            prop="yaoXing"
            label="药性"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="guiJing"
            label="归经"
          />
          <el-table-column prop="gongXiao" label="功效" />
          
          <el-table-column label="状态" align="center" prop="isDeleted" width="80">
            <template  #default="scope">
              <el-tag type="danger" v-if="scope.row.isDeleted">禁用</el-tag>
              <el-tag type="success" v-else>正常</el-tag>
            </template>
          </el-table-column>

          <el-table-column align="center" label width="180">
            <template  #default="scope">
              <ComponentCrud :data="scope" @onEdit="onEdit" @onRestore="onRestore" @onDelete="onDelete" />
            </template>
          </el-table-column>
        </el-table>

        <ComponentPagination 
      :total="total" 
          v-model:page-size="query.pageSize"
          v-model:page="query.currentPage"/>

      </el-card>
  
   
  </div>
</template>

<script>
import { queryData, deletes, restore } from "@/api/zhongyi/yaocai";


export default {
  name: "yaocai",
  components: {  },
  data() {
    return {
      query: {
        name: '',
        pageSize:10,
        currentPage:1,
        tagId: ''
      },
      list: null,
      total: 0,
      listLoading: true,
      checkboxT: false,
      current: "",
      isShow: false,
      title: "",
      showBindRole: false,
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      queryData(this.query).then((res) => {
        this.list = res.result.data;
        this.total = res.result.total;
        this.listLoading = false;
      });
    },
    onAdd() {
      this.current = "";
      this.isShow = true;
      this.title = "添加药材";
    },
    onEdit(row) {
      this.current = row.id;
      this.isShow = true;
      this.title = "编辑药材";
    },
    onChange() {
      this.getList();
    },
    onSearch() {
      //this.query = query;
      this.getList();
    },
    onDelete(row) {
      deletes(row.id).then((_) => {
        row.isDeleted = true;
      });
    },
    onRestore(row) {
      restore(row.id).then((_) => {
        row.isDeleted = false;
      });
    },
    gotodetail(row) {
      console.log(row)
      this.$router.push({ 
        name: 'yaocaidetail',
        params: { id: row.id }
      }) // -> /user/123
    }
  },
  mounted: function () {},
  watch: {
    'query.currentPage': {
      handler(val, oldVal) {
        console.log('watch', this.query)
        this.getList();
      },
      deep: true
    },
    'query.pageSize': {
      handler(val, oldVal) {
        console.log('watch', this.query)
        this.getList();
      },
      deep: true
    },
  }
};
</script>


